<template>
  <div>
    <!-- 基础运价查询 2018/3/6 11:51 zhangQ -->
    <Row>
      <div style="" class="doc-header">
        <Form :model="formItem" :label-width="150">
          <Form-item label="品名">
            <!--<Input v-model="formItem.productNameId" placeholder="请输入品名"></Input>-->
            <Select v-model="formItem.productNameId" filterable placeholder="请输入品名">
              <Option v-for="item in productList" :value="item.pmId" :key="item.pmId">{{ item.pmName }}</Option>
            </Select>
          </Form-item>
          <Form-item label="到站号">
            <!--<Input v-model="formItem.startStationCode" placeholder="发站号"></Input>-->
            <Select v-model="formItem.startStationCode" filterable placeholder="请输入发站名">
              <Option v-for="item in stationInfo" :value="item.stationCode" :key="item.stationCode">{{ item.stationName }}</Option>
            </Select>
          </Form-item>
          <Form-item label="发站号">
            <!--<Input v-model="formItem.endStationCode" placeholder="到站号"></Input>-->
            <Select v-model="formItem.endStationCode" filterable placeholder="请输入到站名">
              <Option v-for="item in stationInfo" :value="item.stationCode" :key="item.stationCode">{{ item.stationName }}</Option>
            </Select>
          </Form-item>
          <Form-item label="是否上门取货">
            <Select v-model="formItem.isSmqh">
              <Option label="是" value="1"></Option>
              <Option label="否" value="0"></Option>
            </Select>
          </Form-item>
          <Form-item label="是否上门装车">
            <Select v-model="formItem.isSmzc">
              <Option label="是" value="1"></Option>
              <Option label="否" value="0"></Option>
            </Select>
          </Form-item>
          <Form-item label="是否送货上门">
            <Select v-model="formItem.isShsm">
              <Option label="是" value="1"></Option>
              <Option label="否" value="0"></Option>
            </Select>
          </Form-item>
          <Form-item label="是否上门卸车">
            <Select v-model="formItem.isSmxc">
              <Option label="是" value="1"></Option>
              <Option label="否" value="0"></Option>
            </Select>
          </Form-item>
          <Form-item label="是否铁路装卸">
            <Select v-model="formItem.isTlzx">
              <Option label="是" value="1"></Option>
              <Option label="否" value="0"></Option>
            </Select>
          </Form-item>

          <Form-item>
            <Button type="primary" @click="submitQuery">提交</Button>
            <Button type="ghost" style="margin-left: 8px" @click="goBack">取消</Button>
          </Form-item>
        </Form>
      </div>
    </Row>
    <Row>
      <Table :columns="resultColumn" :data="result_list" ref="table" v-if="this.result_list.length !== 0"></Table>
    </Row>
  </div>
</template>
<script>
  import { queryFreight } from '@api/backEnd/orderTrain'
  import { getProductInfo } from '@api/backEnd/mainOrder'
  import { getStationInfo } from '@api/frontEnd'

  export default {
    name: 'queryFreight',
    data () {
      return {
        formItem: {
          productNameId: '',
          startStationCode: '',
          endStationCode: '',
          isSmqh: null
        },
        productData: '',
        productList: [],
        stationInfo: [],
        result_list: [],
        resultColumn: [
          {
            title: '20英尺集装箱',
            key: 'jzx20'
          }, {
            title: '整车',
            key: 'zc'
          }, {
            title: '零散快运',
            key: 'lsky'
          }, {
            title: '批量零散',
            key: 'plls'
          }, {
            title: '40英尺集装箱',
            key: 'jzx40'
          }, {
            title: '服务类型',
            key: 'type'
          }]
      }
    },
    computed: {},
    methods: {
      goBack () {
        this.$router.go(-1)
      },
      submitQuery () {
        /* const productName = this.formItem.productNameId
        function findProductName(item) {
          return item.pm_name === productName
        }
        const productId = this.productList.find(findProductName).pm_id */
        const productId = this.formItem.productNameId
        const startStationCode = this.formItem.startStationCode
        const endStationCode = this.formItem.endStationCode
        const isSmqh = this.formItem.isSmqh
        const isSmzc = this.formItem.isSmzc
        const isShsm = this.formItem.isShsm
        const isSmxc = this.formItem.isSmxc
        const isTlzx = this.formItem.isTlzx
        const param = {
          productId,
          startStationCode,
          endStationCode,
          isSmqh,
          isSmzc,
          isShsm,
          isSmxc,
          isTlzx
        }
        queryFreight(param).then(res => {
          if (res.data.isSuccess === 1) {
            this.result_list = res.data.data
          } else {
            this.$Notice.info({
              title: '抱歉，无搜索结果',
              desc: '请更换查询条件',
              duration: 2
            })
          }
        })
      },
      loadData () {
        getProductInfo().then(res => {
          if (res.data.isSuccess === 1) {
            this.productList = res.data.data
          }
        })
        getStationInfo().then(res => {
          if (res.data.isSuccess === 1) {
            this.stationInfo = res.data.data
          }
        })
      }
    },
    created () {
      this.loadData()
    },
    components: {}
  }
</script>
<style scoped>

</style>
